<template>
	<div class="trade">
		<trade-header/>
		<template v-if="gameId">
			<img v-if="imgShow" src="~assets/images/trade/shuiyin_bs.png" class="trade-mark-sy" alt="">
		</template>
		<template v-else>
			<img v-if="imgShow" src="~assets/images/trade/shuiyin_jy.png" class="trade-mark-sy" alt="">
		</template>

    <div class="trade-header-below" :class="{ 'game-header-below': !!gameId }"></div>

		<div class="trade-main" id="tradeMain">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	import TradeHeader from '../components/trade/TradeHeader'
	export default {
		data () {
			const { gameId = '' } = this.$route.query
			return {
				gameId,
				imgShow:false
			}
		},
		created(){
					this.gameId =  this.$route.query.gameId ? this.$route.query.gameId : '';
					if(this.$route.path==='/trade/cancel'
						|| this.$route.path==='/trade/gamecancel'){
						this.imgShow = true
					}
		},
		components: {
			TradeHeader
		},
		watch: {
			'$route': function(to,from){
				if(to.path=='/trade/gamecancel' || to.path=='/trade/cancel'){
					this.imgShow = true
				}else{
					this.imgShow = false
				}
			}
		}
	}
</script>

<style>

	.trade::-webkit-scrollbar {
	    display: none;
	}
	.trade-header-below {
		position: fixed;
		width: 100%;
		height: 44px;
		top: 0;
		left: 0;
		z-index: 0;
		background-color: #EC4F4F;
	}
	.trade-mark-sy {
		position: fixed;
		top: 0;
		right: 20px;
		z-index: 10;
	}
	.game-header-below {
		background-color: #E54F20!important;
	}
	.trade-main::-webkit-scrollbar {
		display: none;
	}
</style>
